<!-- 买家秀 -->
<template>
	<view class="">
		<view class="subscribe" :style="{'background-image': 'url(' + detailimg + ')'}">
			<view class="">
				<!-- {{detailname}} -->
			</view>
			<view class="addbox" v-if="isubscribe">
				<view class="addsubsc">
					已订阅
				</view>
			</view>
			<view class="addbox" @click="subsuc(1)" v-else>
				<view class="addsubsc">
					+订阅
				</view>
				<!-- <view class="">
					送20金币
				</view> -->
			</view>
		</view>
		<view class="release" @click="torelease">
			发布
		</view>
		<view class="dir-left-wrap one-box" v-for="(item,index) in list" :key="index">
			<view class="leftdt dir-left-nowrap main-center">
				<view class="daytext">{{item.updated_at.substring(8,10)}}</view>
				<view class="monthtext">{{item.updated_at.substring(5,7) + '月'}}</view>
			</view>
			<view class="rightdt">
				<view class="">
					{{item.content}}
				</view>
				<view class="palace-grid">
					<image v-for="(its,idx) in item.pic_url" :key="idx" :src="its" class="part"
						:class="item.pic_url.length == 1 ? 'onepart' : item.pic_url.length < 5 ? 'twopart' : 'thrpart'"
						mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				list: [],
				detailname: '',
				mall_id: 1,
				isubscribe: false,
				detailimg: '',
				page: 1,
				page_count: 1
			}
		},
		onLoad(options) {
			this.mall_id = options.mall_id || 1
			if (this.mall_id > 1) {
				// this.$store.dispatch('malid/actionSetMallId', this.mall_id)
			}

			this.subsuc(2)
			this.loadDetail()
			this.loadList()
		},
		computed: {
			...mapState({
				storemall: state => state.malid.apimaUrl
			}),
		},
		onReachBottom() {
			if (this.page_count > this.page) {
				this.page++
				this.loadList()
			}
		},
		methods: {
			torelease() {
				uni.navigateTo({
					url: '/pages/entity/release?title=' + this.detailname
				})
			},
			loadDetail() {
				let url = this.storemall.entity.detail
				this.$request({
					url: url,
					data: {
						id: this.mall_id
					}
				}).then(res => {
					this.detailname = res.data.detail.name
					uni.setNavigationBarTitle({
						title: this.detailname
					})
					this.detailimg = res.data.detail.catlink.option2.cateinfo[0].icon_url
				})
			},
			subsuc(type = 1) {
				let url = this.storemall.entity.subscribe
				let fodata = {
					mch_id: 0,
					mall_id: this.mall_id,
				}
				this.$request({
					url: url,
					data: {
						formdata: JSON.stringify(fodata),
						type: type
					},
					method: 'post'
				}).then(res => {
					if (type == 1) {
						if (res.code == 0) {
							this.isubscribe = true
						}
					} else if (type == 2) {
						if (res.msg == '关注成功') {
							this.isubscribe = true
						} else {
							this.isubscribe = false
						}
					}
				})
			},
			loadList() {
				this.$request({
					url: this.storemall.entity.buyerlist,
					data: {
						page: this.page
					}
				}).then(res => {
					// this.list = res.data.list
					this.list = this.list.concat(res.data.list)
					this.page_count = res.data.pagination.page_count
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.subscribe {
		// margin-top: 120rpx;
		width: 750rpx;
		// display: flex;
		// justify-content: space-around;
		// align-items: center;
		// padding: 24rpx 0;
		// height: 160rpx;
		// width: 708rpx;
		margin: 0 auto 24rpx;
		display: flex;
		justify-content: space-between;
		// height: 224rpx;
		height: 238rpx;
		// color: #F7F7F7;
		color: #ff0000;
		text-align: center;
		font-size: 28rpx;
		background-size: 100% 100%;
		background-color: #FFFFFF;
		// border-radius: 24rpx;
		border: 2rpx solid #77370b;

		&.subfixed {
			position: fixed;
			top: 0;
			z-index: 9777;
		}

		.addbox {
			padding: 8rpx;
		}

		.addsubsc {
			// border: 1rpx solid #F7F7F7;
			// padding: 6rpx;
			background: #d6d6d6;
			border-radius: 56rpx;
			font-size: 28rpx;
			font-weight: bold;
			padding: 6rpx 24rpx;
		}
	}

	.release {
		margin: 24rpx 0;
		width: 750rpx;
		height: 80rpx;
		background: #ff2600;
		color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: 600;
		line-height: 80rpx;
	}

	.daytext {
		font-size: 28rpx;
		margin-right: 4rpx;
		line-height: 54rpx;
	}

	.monthtext {
		font-size: 20rpx;
		line-height: 36rpx;
	}

	.one-box {
		margin-top: 24rpx;
	}

	.leftdt {
		width: 126rpx;
		font-weight: bold;
		text-align: center;
	}

	.rightdt {
		width: 624rpx;
		font-size: 24rpx;
		font-weight: 600;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box; // 弹性伸缩盒
		-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
	}

	.palace-grid {
		display: flex;
		// width: 600rpx;
		// height: 600rpx;
		flex-wrap: wrap;
	}

	.part {
		margin-top: 24rpx;
	}

	.onepart {
		width: 600rpx;
		height: 600rpx;
	}

	.twopart {
		width: 288rpx;
		height: 288rpx;

		&.twopart:nth-child(2n) {
			margin-left: 24rpx;
		}
	}

	.thrpart {
		width: 192rpx;
		height: 192rpx;
		margin-left: 12rpx;
		margin-top: 12rpx;

		&.thrpart:nth-child(3n - 2) {
			margin-left: 0;
		}
	}
</style>
